<!DOCTYPE html>
<html>
<head>
<title>Canvas Editing </title>
<style type="text/css">
.fill { 
    min-height: 100%;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
<script type="text/javascript" src="editcanvas.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$.getScript('canvasuploader.js');

var uploadimgheight=600;
var uploadimgwidth=480;
var fileToUpload="";
var uploadTarget=document.getElementById("drop-target");
uploadTarget.addEventListener("dragover",function(e){
	e.preventDefault();
},true);
uploadTarget.addEventListener("drop",function(e){
	e.preventDefault();
	fileToUpload=e.dataTransfer.files[0];
	loadImageIntoCanvas(fileToUpload);
},true);
function loadImageIntoCanvas(file){
	alert(file.size);
	if(!file.type.match(/image.*/)){
		return;
	}
	var fr=new FileReader();
	fr.onload=function(e){
		drawimage(e.target.result);
	};
	fr.readAsDataURL(file);
}
function drawimage(fileurl){
	alert(fileurl);
	var img=new Image();
	img.onload=function(){
		var canvas=document.getElementById("imgcanvas");
		var twod=canvas.getContext("2d");

		twod.clearRect(0,0,canvas.width,canvas.height);
		if(img.height>uploadimgheight){
			img.width*=uploadimgheight/img.height;
			img.height=uploadimgheight;
			alert("dimention is now "+img.width+" "+img.height);
		}
		if(img.width>uploadimgwidth){
			img.height*=uploadimgwidth/img.width;
			img.width=uploadimgwidth;
			alert("dimention is now "+img.width+" "+img.height);
		}
		canvas.width=img.width;
		canvas.height=img.height;
		twod.drawImage(img,0,0,img.width,img.height);
		//twod.drawImage(img,0,0,nativewidth,nativeheight,(canvas.width-img.width)/2,(canvas.height-img.height)/2,img.width,img.height);
	};
	img.src=fileurl;
}

})

</script>
<style type="text/css">
		#drop-target {
			top: 12px;
			left: 12px;
			width: 80%;
			height: 100%;
			background-color: #eee;
			border: 1px solid #ccc;
			text-align: center;
			padding: 12px;
		}

	</style>
</head>
<body>
	

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
<div class="">
<div class="container-fluid fill" style="height:600px;min-height:100%;padding:10px;">
<div class="span6 " style="border:1px solid #ccc;height:100%;min-height:>100%">
	<div class="row-fluid">
		<ul class="thumbnails">
			<li class="span3">
				<div class="thumbnail">
				<img src="#" alt="image" id="1" style="width:100%;height:100" draggable="true" ondragstart="drag(event)"/>
				<div class="caption" style="text-align:center">
					<h6> test caption</h6>
				</div>
				</div>
			</li>
		</ul>

	</div>
</div>
<div class="span6 " style="border:1px solid #ccc;height:100%;min-height:100%;">
	<div style="border:1px dotted #ccc;width:98%;height:98%;margin:0 auto" ondragover="allowDrop(event)" ondrop="drop(event)">
	</div>
</div>
</div>
<div class="container-fluid fill" style="height:600px;min-height:100%;padding:10px;display:none">
	<div class="row-fluid">
		<div class="span3">	
	<div id="drop-target" ><h6> Place your image here</h6>
	</div>
	</div>
	<div class="span6">
	<h4>Progress:</h4>
	<ul class="unstyled">
	    <li> <span class="pull-right strong">45%</span>
	        <div class="progress progress-important">
	            <div class="bar" style="width: 45%;"></div>
	        </div>
	    </li>
	    
	</ul>
	</div>
	<div class="span3">
	<div id="uploadbtn"  style="align:bottom">
	<a class="btn btn-large btn-block btn-primary">
		<i class="icon-pencil icon-white"></i><br/>
		<span><strong>Upload</strong></span> 
	</a>
	</div>
	</div>
	</div>
	<div class="row-fluid" style="height:100%">
	<div class="span12" style="height:100%;border:1px solid #ccc;margin:0px auto;">
		<canvas  id ="imgcanvas" style="display:block"></canvas>
	</div>
</div>
</div>
</div>
</body>
</html>
